import React, { useState } from 'react';
import BoxItem from '../../../components/BoxItem';
import BorderTable from '../components/BorderTable';

import { Button, DatePicker, Form, Input, Select } from 'antd';

const { RangePicker } = DatePicker;

export default function LocationQuery() {
	const columns = [
		{ title: '商品编码', dataIndex: 'productCode', key: 'productCode' },
		{ title: '商品名称', dataIndex: 'productName', key: 'productName' },
		{ title: '库存单位', dataIndex: 'unitOfMeasurement', key: 'unitOfMeasurement' },
		{ title: '当前库存', dataIndex: 'currentStock', key: 'currentStock' },
		{ title: '占用库存', dataIndex: 'occupiedStock', key: 'occupiedStock' },
		{ title: '可用库存', dataIndex: 'availableStock', key: 'availableStock' },
		{ title: '总成本', dataIndex: 'totalCost', key: 'totalCost' },
		{ title: '创建时间', dataIndex: 'creationTime', key: 'creationTime' },
		{ title: '操作', dataIndex: 'operation', key: 'operation' }
	];

	const dataSource = [
		{
			key: '1',
			productCode: 'P001',
			productName: 'Wireless Mouse',
			unitOfMeasurement: 'Piece',
			currentStock: 150,
			occupiedStock: 50,
			availableStock: 100,
			totalCost: 1200,
			creationTime: '2024-01-15',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '2',
			productCode: 'P002',
			productName: 'Mechanical Keyboard',
			unitOfMeasurement: 'Piece',
			currentStock: 80,
			occupiedStock: 20,
			availableStock: 60,
			totalCost: 2400,
			creationTime: '2024-01-10',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '3',
			productCode: 'P003',
			productName: 'Laptop Stand',
			unitOfMeasurement: 'Piece',
			currentStock: 200,
			occupiedStock: 30,
			availableStock: 170,
			totalCost: 800,
			creationTime: '2024-02-01',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '4',
			productCode: 'P004',
			productName: 'USB-C Cable',
			unitOfMeasurement: 'Piece',
			currentStock: 500,
			occupiedStock: 100,
			availableStock: 400,
			totalCost: 300,
			creationTime: '2024-02-15',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '5',
			productCode: 'P005',
			productName: 'HDMI Cable',
			unitOfMeasurement: 'Piece',
			currentStock: 350,
			occupiedStock: 50,
			availableStock: 300,
			totalCost: 500,
			creationTime: '2024-03-05',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '6',
			productCode: 'P006',
			productName: 'Wireless Headphones',
			unitOfMeasurement: 'Piece',
			currentStock: 120,
			occupiedStock: 40,
			availableStock: 80,
			totalCost: 3000,
			creationTime: '2024-03-12',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '7',
			productCode: 'P007',
			productName: 'Smartwatch',
			unitOfMeasurement: 'Piece',
			currentStock: 75,
			occupiedStock: 25,
			availableStock: 50,
			totalCost: 5000,
			creationTime: '2024-03-20',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '8',
			productCode: 'P008',
			productName: 'Bluetooth Speaker',
			unitOfMeasurement: 'Piece',
			currentStock: 150,
			occupiedStock: 30,
			availableStock: 120,
			totalCost: 1500,
			creationTime: '2024-04-01',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '9',
			productCode: 'P009',
			productName: 'Portable SSD',
			unitOfMeasurement: 'Piece',
			currentStock: 60,
			occupiedStock: 15,
			availableStock: 45,
			totalCost: 2000,
			creationTime: '2024-04-10',
			operation: ['库存分布', '库存流水']
		},
		{
			key: '10',
			productCode: 'P010',
			productName: 'Smartphone Case',
			unitOfMeasurement: 'Piece',
			currentStock: 300,
			occupiedStock: 75,
			availableStock: 225,
			totalCost: 400,
			creationTime: '2024-04-20',
			operation: ['库存分布', '库存流水']
		}
	];

	return (
		<div>
			<BoxItem>
				<Button size="large">导入</Button>
			</BoxItem>
			<BoxItem>
				<Form
					layout="inline" // 使用 inline 布局使所有字段并排显示
					style={{ maxWidth: '100%' }}
				>
					<Form.Item label="仓库" style={{ width: '170px' }} wrapperCol={{ span: 15 }}>
						<Select defaultValue="请选择">
							<Select.Option value="仓库A">仓库A</Select.Option>
							<Select.Option value="仓库B">仓库B</Select.Option>
							<Select.Option value="仓库C">仓库C</Select.Option>
							<Select.Option value="仓库D">仓库D</Select.Option>
							<Select.Option value="仓库E">仓库E</Select.Option>
						</Select>
					</Form.Item>
					<Form.Item label="创建时间" style={{ width: '350px' }} wrapperCol={{ span: 20 }}>
						<RangePicker />
					</Form.Item>
					<Form.Item style={{ width: '180px' }} wrapperCol={{ span: 20 }}>
						<Input placeholder="请输入关键词" />
					</Form.Item>
					<Form.Item>
						<Button type="primary" style={{ marginRight: '20px' }}>
							搜索
						</Button>
						<Button>重置</Button>
					</Form.Item>
				</Form>
			</BoxItem>

			<BoxItem>
				<BorderTable columns={columns} dataSource={dataSource} />
			</BoxItem>
		</div>
	);
}
